import React, { useEffect, useState } from "react";
import LlxForm from 'components/LlxForm/index'
import { Form,Image,Select,Modal,Input} from 'antd';
import {materialAllWord} from 'api/index'
import LlxPlay from '../LlxPlay'
import LlxTable from '../LlxTable'
import RelaceOnePhoto from "components/LlxPushData/replaceOnePhoto";
const {Search} = Input

const Words = (props) => {
  const {isModalVisible, setIsModalVisible,dictionaries,importData} = props

  const [form] = Form.useForm();
  //分页数据
const [pagination,setPagination] = useState({
  current:1,
  pageSize:10
})
//初始表格数据
const [total,setTotal] = useState(0) //总数量
const [dataSource,setDataSource] = useState([])
const [loading,setLoading] = useState(false) //加载
const [pictureList,setPictureList] =useState([])
const [isModalVisibleOnePhoto, setIsModalVisibleOnePhoto] = useState(false)

  const formItem = [
    {label: '', name: 'name' , span: 8,render: () => {
      return  <Search placeholder="请输入关键词搜索" onSearch={getNewList} enterButton />
  } },
    {label: '词性', name: 'pofId' , span: 8 ,render: () => {
      return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      fieldNames={{value:'id',label:'dictValue'}}
      placeholder={'请选择词性'}
      options={dictionaries.PartOfSpeech}
    >
    </Select>
  }},
    {label: '级别', name: 'levelId' , span: 8,render: () => {
      return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      fieldNames={{value:'id',label:'dictValue'}}
      placeholder={'请选择级别'}
      options={dictionaries.Level}
    >
    </Select>
  } }
  ]
  
  const columns = [
    {title: '名称', dataIndex: 'wordName', key: 'wordName', align: 'center'},
    {title: '音频', dataIndex: 'audioUrl', key: 'audioUrl', align: 'center',render:(text,row)=>{
      return  <div>
       <LlxPlay audioUrl={text}></LlxPlay>
      </div>
    }},
    {title: '图片', dataIndex: 'pictureUrl',width:150, key: 'pictureUrl', align: 'center',render:(text,row)=>{
      return  <div>
       <Image
          width={60}
          src={row.picture || row.wdWordPictures[0].pictureUrl}
        />
        <span className="text-link" onClick={()=>checkImg(row)}>替换</span>
      </div>
    }},
    {title: '操作', dataIndex: 'active', key: 'active', align: 'center',render:(text,row)=>{
      return  <div>
       <span className="text-link" onClick={()=>handleOk(row,'all')}>全部</span>&nbsp;&nbsp;&nbsp;
       <span className="text-link" onClick={()=>handleOk(row,'audio')}>音频</span>&nbsp;&nbsp;&nbsp;
       <span className="text-link" onClick={()=>handleOk(row,'picture')}>图片</span>
      </div>
    }},
]

useEffect(()=>{
  isModalVisible&&getNewList()
},[isModalVisible])// eslint-disable-line react-hooks/exhaustive-deps

  // 1.获取数据
  const getNewList = async(value) => {
    setLoading(true)
    const res = await materialAllWord({
      currPage:value&&value.pageSize?value.current:pagination.current,
      pageSize:value&&value.pageSize?value.pageSize:pagination.pageSize,
      pofId:form.getFieldValue().pofId,
      wordName:form.getFieldValue().name,
      levelId:form.getFieldValue().levelId
    })
    const data = res.result.records || []
    
    setDataSource(data)

    setTotal(res.result.total)
    setLoading(false)
  }
  //2.确认  
  const handleOk = async (value,type) => {
    switch(type){
      case 'all':
        importData({
          pictureUrl:value.picture||value.wdWordPictures[0].pictureUrl,
          audioUrl:value.audioUrl,
          wordName:value.wordName,
          type:1
        })
      break
      case 'audio':
        importData({
          audioUrl:value.audioUrl,
          type:2
        })
      break
      case 'picture':
        importData({
          pictureUrl:value.picture||value.wdWordPictures[0].pictureUrl,
          type:3
        })
      break
      default:
      return
    }
  }
  //3.取消
  const handleCancel = () => {
    form.resetFields()
    setIsModalVisible(false);
  };
  // 4.获取修改的图片
  const getSelectPhoto = (i) => {
     dataSource.filter(item=>item.id===i.wordId)[0].picture=i.pictureUrl
  }
  // 5.替换图片
  const checkImg = async (value) => {
    setPictureList(value.wdWordPictures)
    setIsModalVisibleOnePhoto(true)
  }
  
  return   <Modal  wrapClassName="modal-footer" onCancel={handleCancel} width={950} footer={null} title="单词导入" visible={isModalVisible}>
        <LlxForm form={form} labelCol={8} formItem={formItem} />
   
      {/* 表格 */}
     <LlxTable
      loading={loading} 
      pagination={pagination}
      setPagination={setPagination}
      selectedRowShow={false}
      height={450}
      total={total}
      getNewList={getNewList}
      columns={columns}
      dataSource={dataSource}/>


        <RelaceOnePhoto getSelectPhoto={getSelectPhoto} data={pictureList} isModalVisible={isModalVisibleOnePhoto} setIsModalVisible={setIsModalVisibleOnePhoto}></RelaceOnePhoto>
       
   </Modal>

}
export default Words